import Taro, { Component } from '@tarojs/taro'
import { View, Text, Swiper, SwiperItem, Map, ScrollView } from '@tarojs/components'
import './index.scss'
import { AtButton, AtCalendar, AtCard, AtInputNumber, AtImagePicker, AtTabs, AtTabsPane, AtPagination, AtActivityIndicator, AtList, AtListItem, AtIcon, AtDivider, AtFloatLayout, AtMessage } from 'taro-ui'
import AtTabBar_index from '../../components/AtTabBar_index';
// 引入SDK核心类
import requets from '../../service/api';
var QQMapWX = require('../../assets/qqmap-wx-jssdk1.2/qqmap-wx-jssdk');
var yiyuan_icon = require('../../assets/img/yiyuan_icon.png')
var tongyi = require('../../assets/img/tongyi.png')
var jujue = require('../../assets/img/jujue.png')
var shenhe = require('../../assets/img/shenhe.png')
// 实例化API核心类
var qqmapsdk = new QQMapWX({
  key: 'D43BZ-P7MKO-N4TWG-SGR4H-SLJIE-YAFTN' // 必填
});
Date.prototype.format = function (fmt) {
  var o = {
    "M+": this.getMonth() + 1,                 //月份 
    "d+": this.getDate(),                    //日 
    "h+": this.getHours(),                   //小时 
    "m+": this.getMinutes(),                 //分 
    "s+": this.getSeconds(),                 //秒 
    "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
    "S": this.getMilliseconds()             //毫秒 
  };
  if (/(y+)/.test(fmt)) {
    fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
  }
  for (var k in o) {
    if (new RegExp("(" + k + ")").test(fmt)) {
      fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    }
  }
  return fmt;
}
export default class Index extends Component {
  config = {
    navigationBarTitleText: '医疗废物收运助手'
  }
  state = {
    end:'',
    start:'',
    flag:false,
    count: 0,
    rows: 10,
    ListData: [],
    userId: '',
    selector: ['全部', '待审批', '已同意', '已拒绝'],
    isOpened: false,
    selectorChecked: '0',
    current: 2,
    currentAtTabs: 0,
    dargStyle: {//下拉框的样式
      top: 0 + 'px'
    },
    downDragStyle: {//下拉图标的样式
      height: 0 + 'px'
    },
    downText: '下拉刷新',
    upDragStyle: {//上拉图标样式
      height: 0 + 'px'
    },
    pullText: '上拉加载更多',
    start_p: {},
    scrollY: true,
    dargState: 0//刷新状态 0不做操作 1刷新 -1加载更多
  }

  componentWillMount() { }

  componentDidMount() {

    Taro.getStorage({
      key: 'userId',
      success: (res) => {
        this.setState({
          userId: res.data
        }, () => {
          this.pagingQueryCollectorRecord()
        })
      }
    })
  }

  componentWillUnmount() { }

  componentDidShow() { }

  componentDidHide() { }

  onhandleClicks = (type, text) => {
    Taro.atMessage({
      'message': text,
      'type': type,
    })
  }

  pagingQueryCollectorRecord = (page, rows) => {
    let params = {
      auditType: this.state.selectorChecked == '0' ? '' : this.state.selectorChecked,
      endTime:this.state.end?this.state.end  + '23:59:59':'',
      hospitalId: '',
      page: 1,
      rows: this.state.rows,
      startTime: this.state.start?this.state.start + '00:00:00':'',
      userId: this.state.userId
    }
    requets.baseOptions({
      url: `/zjn-web/zjn/collector/record/pagingQueryCollectorRecord`,
      method: 'POST',
      data: params
    }).then((res) => {
      console.log(res)
      if (res.data.rc === 0) {
        if (res.data.ret.items.length > 0) {
          res.data.ret.items.forEach((item) => {
            item.url = item.auditType == '1' ? shenhe : item.auditType == '2' ? tongyi : jujue
            item.time = new Date(item.createTime).format("yyyy-MM-dd hh:mm:ss");
          })
          this.setState({
            ListData: res.data.ret.items,
            count: res.data.ret.count
          })
          if (!res.data.ret.count) {
            this.onhandleClicks('', '暂无数据')
          } else {
            if (res.data.ret.count / 10 > 1) {

            } else {
              this.onhandleClicks('', '暂无更多数据')
            }
          }

        }else{
          this.setState({
            ListData: res.data.ret.items,
            count: res.data.ret.count
          })
          this.onhandleClicks('', '暂无数据')
        }

      }
    })
  }

  handleClick(value) {
    this.setState({
      currentAtTabs: value
    })
  }

  reduction() {//还原初始设置
    const time = 0.5;
    this.setState({
      upDragStyle: {//上拉图标样式
        height: 0 + 'px',
        transition: `all ${time}s`
      },
      dargState: 0,
      dargStyle: {
        top: 0 + 'px',
        transition: `all ${time}s`
      },
      downDragStyle: {
        height: 0 + 'px',
        transition: `all ${time}s`
      },
      scrollY: true
    })
    setTimeout(() => {
      this.setState({
        dargStyle: {
          top: 0 + 'px',
        },
        upDragStyle: {//上拉图标样式
          height: 0 + 'px'
        },
        pullText: '上拉加载更多',
        downText: '下拉刷新'
      })
    }, time * 1000);
  }
  touchStart(e) {
    this.setState({
      start_p: e.touches[0]
    })
  }
  touchmove(e) {
    let that = this
    let move_p = e.touches[0],//移动时的位置
      deviationX = 0.30,//左右偏移量(超过这个偏移量不执行下拉操作)
      deviationY = 70,//拉动长度（低于这个值的时候不执行）
      maxY = 100;//拉动的最大高度

    let start_x = this.state.start_p.clientX,
      start_y = this.state.start_p.clientY,
      move_x = move_p.clientX,
      move_y = move_p.clientY;


    //得到偏移数值
    let dev = Math.abs(move_x - start_x) / Math.abs(move_y - start_y);
    if (dev < deviationX) {//当偏移数值大于设置的偏移数值时则不执行操作
      let pY = Math.abs(move_y - start_y) / 3.5;//拖动倍率（使拖动的时候有粘滞的感觉--试了很多次 这个倍率刚好）
      if (move_y - start_y > 0) {//下拉操作
        if (pY >= deviationY) {
          this.setState({ dargState: 1, downText: '释放刷新' })
        } else {
          this.setState({ dargState: 0, downText: '下拉刷新' })
        }
        if (pY >= maxY) {
          pY = maxY
        }
        this.setState({
          dargStyle: {
            top: pY + 'px',
          },
          downDragStyle: {
            height: pY + 'px'
          },
          scrollY: false//拖动的时候禁用
        })
      }
      if (start_y - move_y > 0) {//上拉操作
        console.log('上拉操作')
        if (pY >= deviationY) {
          this.setState({ dargState: -1, pullText: '释放加载更多' })
        } else {
          this.setState({ dargState: 0, pullText: '上拉加载更多' })
        }
        if (pY >= maxY) {
          pY = maxY
        }
        this.setState({
          dargStyle: {
            top: -pY + 'px',
          },
          upDragStyle: {
            height: pY + 'px'
          },
          scrollY: false//拖动的时候禁用
        })
      }

    }
  }
  pull() {//上拉
    console.log('上拉')
    // this.props.onPull()
    let rows = this.state.rows+10
    this.setState({
      rows
    },() => {
      this.pagingQueryCollectorRecord()
    })

  }
  down() {//下拉
    console.log('下拉')
    let rows = 10
    this.setState({
      rows
    },() => {
      this.pagingQueryCollectorRecord()
    })
    // this.props.onDown()
  }
  ScrollToUpper() { //滚动到顶部事件
    console.log('滚动到顶部事件')
    // this.props.Upper()
  }
  ScrollToLower() { //滚动到底部事件
    console.log('滚动到底部事件')
    // this.props.Lower()
  }
  touchEnd(e) {
    if (this.state.dargState === 1) {
      this.down()
    } else if (this.state.dargState === -1) {
      this.pull()
    }
    this.reduction()
  }



  onisOpened = () => {
    this.setState({
      isOpened: !this.state.isOpened
    })
  }

  ononClose = () => {
    this.setState({
      isOpened: !this.state.isOpened
    })
  }

  onChange = (v) => {
    console.log(v.target.value)
    let num = v.target.value == 0?'':v.target.value
    this.setState({
      selectorChecked:num,
      rows:10
    },() => {
      this.pagingQueryCollectorRecord()
    })
  }

  onNext = (item) => {
    console.log(item)
    Taro.navigateTo({
      url: `/pages/details/index?recordId=${item.recordId}&pages=历史查询`
    })
  }

  onSelectDate  = (SelectDate) => {
    console.log(SelectDate)
    if(SelectDate.value.end){
      this.setState({
        end:SelectDate.value.end,
        start:SelectDate.value.start,
        flag:true
      })
    }else{
      this.setState({
        flag:false
      })
    }
  }

  render() {
    const { value_AtInputNumber, current, currentAtTabs, isOpened, ListData,end,start} = this.state

    let dargStyle = this.state.dargStyle;
    let downDragStyle = this.state.downDragStyle;
    let upDragStyle = this.state.upDragStyle;
    let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]


    return (
      <View className='index'>
        <AtMessage />
        <AtFloatLayout isOpened={isOpened} title="日期查询" onClose={this.ononClose}>
        <View className='chaxunBox'>查询时间 : {start} ~ {end} <AtButton className='chaxun' type='primary' size='small' full={true} circle={true} onClick={this.pagingQueryCollectorRecord}>查询</AtButton></View>
          <AtCalendar isMultiSelect onSelectDate={this.onSelectDate} />
        </AtFloatLayout>
        <AtTabBar_index current={current} />
        <View className="tab1" >
          <View className="topBox">
            <Picker mode='selector' range={this.state.selector} onChange={this.onChange}>
              <View>状态 <AtIcon value='chevron-down' size='20' color='#333'></AtIcon> </View>
            </Picker>

            <View onClick={this.onisOpened}>日期 <AtIcon value='chevron-down' size='20' color='#333'></AtIcon> </View>

          </View>
          <View className='dragUpdataPage'>
            <View className='downDragBox' style={downDragStyle}>
              <AtActivityIndicator></AtActivityIndicator>
              <Text className='downText'>{this.state.downText}</Text>
            </View>
            <ScrollView
              style={dargStyle}
              onTouchMove={this.touchmove}
              onTouchEnd={this.touchEnd}
              onTouchStart={this.touchStart}
              onScrollToUpper={this.ScrollToUpper}
              onScrollToLower={this.ScrollToLower}
              className='dragUpdata'
              scrollY={this.state.scrollY}
              scrollWithAnimation>
              <View style='width:100%;height:82vh;' >
                <AtList>
                  {
                    ListData.map((item, index) => {
                      return (
                        <View key={index}>
                          {/* <AtDivider content='分割线' /> */}
                          <AtListItem
                            title={item.hospitalName}
                            note={item.time + `  ` + item.collectorBucketNum + `桶 ` + `  ` + item.collectorWeight + `kg `}
                            // extraText='详细信息'
                            // arrow='right'
                            thumb={item.url}
                            onClick={this.onNext.bind(this, item)}
                          />
                        </View>

                      )
                    })
                  }

                </AtList>
              </View>
            </ScrollView>
            <View className='upDragBox' style={upDragStyle}>
              <AtActivityIndicator></AtActivityIndicator>
              <Text className='downText'>{this.state.pullText}</Text>
            </View>
          </View>
        </View>


      </View>
    )
  }
}
